<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jessibuca.js"></script>
    <style>
        .root {
            display: flex;
            place-content: center;
            margin-top: 3rem;
        }

        .container-shell {
            backdrop-filter: blur(5px);
            background: hsla(0, 0%, 50%, 0.5);
            padding: 30px 4px 10px 4px;
            /* border: 2px solid black; */
            width: auto;
            position: relative;
            border-radius: 5px;
            box-shadow: 0 10px 20px;
        }

        .container-shell:before {
            content: "jessibuca demo player";
            position: absolute;
            color: darkgray;
            top: 4px;
            left: 10px;
            text-shadow: 1px 1px black;
        }

        #container {
            background: rgba(13, 14, 27, 0.7);
            width: 640px;
            height: 398px;
        }

        .input {
            display: flex;
            margin-top: 10px;
            color: white;
            place-content: stretch;
        }

        .input2 {
            bottom: 0px;
        }

        .input input {
            flex: auto;
        }

        .err {
            position: absolute;
            top: 40px;
            left: 10px;
            color: red;
        }

        .option {
            position: absolute;
            top: 4px;
            right: 10px;
            display: flex;
            place-content: center;
            font-size: 12px;
        }

        .option span {
            color: white;
        }

        .page {
            background: url('./bg.jpg');
            background-repeat: no-repeat;
            background-position: top;
        }

        @media (max-width: 720px) {
            #container {
                width: 90vw;
                height: 52.7vw;
            }
        }
    </style>
</head>
<body class="page">
<div class="root">
    <div class="container-shell">
        <div id="container"></div>
        <div class="input">
            iPhone，chrome等要求自动播放时，音频必须静音，需要由一个真实的用户交互
            <br>
            操作来恢复，不能使用代码。
            <br>
            https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
        </div>
        <div class="input">
            自动播放是默认静音的，需要手动触发cancelMute()
            <br>
            我绑定了container窗口的点击事件，来激活声音。
        </div>

    </div>
</div>

<script>
    var $container = document.getElementById('container');


    var showOperateBtns = true; // 是否显示按钮
    var forceNoOffscreen = true; //
    var jessibuca = null;
    var playUrl = 'https://live.nodemedia.cn:8443/live/b480_264.flv';

    function create() {
        jessibuca = new Jessibuca({
            container: $container,
            videoBuffer: 0.2, // 缓存时长
            isResize: false,
            text: "",
            loadingText: "加载中",
            debug: true,
            useMSE: true,
            showBandwidth: showOperateBtns, // 显示网速
            operateBtns: {
                fullscreen: showOperateBtns,
                screenshot: showOperateBtns,
                play: showOperateBtns,
                audio: showOperateBtns,
            },
            forceNoOffscreen: forceNoOffscreen,
            isNotMute: false,
        },);

        jessibuca.onLog = msg => console.error(msg);
        jessibuca.onRecord = (status) => console.log('onRecord', status);
        jessibuca.onPause = () => console.log('onPause');
        jessibuca.onPlay = () => console.log('onPlay');
        jessibuca.onFullscreen = msg => console.log('onFullscreen', msg);
        jessibuca.onMute = msg => console.log('onMute', msg);


        setTimeout(() => {
            jessibuca.play(playUrl).then(() => {
                console.log('play success')
            }).catch((e) => {
                console.error(e);
            });
        }, 150)
    }

    create();


    $container.addEventListener('click', function () {
        jessibuca.cancelMute()
    }, false)


</script>

</body>
</html>
